import React, { useState, useEffect } from 'react';
import { Form, message } from 'antd';
import AxTable from '@/components/AxList/AxTable';
import AxColumnAction from '@/components/AxList/AxColumnAction';
import { axhttp } from '@/shared/axhttp';
import { axurl } from '@/shared/axurl';
import { AxSelectEnum } from '@/components/AxForm/AxFormItem';
import { AxUpdateForm } from '@/components/AxForm/AxUpdateForm';
import { axconst } from '@/shared/axconst';
import { AxColumnEnum } from '@/components/AxList';

const { getX, postFormX } = axhttp;
const url = axurl.center.s.flow.need.eduStatus;

/** 修改在校 - 业务表单 */
export const EduStatus: React.FC<any> = (props) => {
    const { recordId, canEdit } = props;
    const [data, setData] = useState<any>({ list: [] });
    const [loading, setLoading] = useState(false);
    const [updateVisible, setUpdateVisible] = useState<any>(false);
    const [operateValues, setOperateValues] = useState<any>({});

    const [columns, setColumns] = useState<any>([
        {
            title: '在校状态',
            dataIndex: 'eduStatus',
            width: axconst.width.fouronly,
            render: (val: any) => <AxColumnEnum enumName='eduStatus' value={val} />,
        },
    ]);

    useEffect(() => {
        setLoading(true);
        getX(url.read, { recordId: recordId })
            .then((res: any) => {
                setData({
                    list: res.data && [{
                        id: 0,
                        ...res.data,
                    }] || []
                });
            })
            .finally(() => {
                setLoading(false);
            });
    }, []);

    useEffect(() => {
        if (canEdit === true) {
            setColumns([
                ...columns,
                {
                    title: '操作',
                    dataIndex: 'operate',
                    width: axconst.width.two,
                    render: (val: any, record: any) => (
                        <AxColumnAction
                            buttons={[
                                {
                                    text: '修改',
                                    onClick: () => handleUpdateModal(record),
                                }
                            ]}
                        />
                    ),
                },
            ]);
        }
    }, [canEdit]);

    const handleUpdateModal = (record: any) => {
        setUpdateVisible(true);
        setOperateValues(record);
    }

    const handleCallback = (fields: any) => {
        setData({
            list: [{
                ...data.list,
                ...fields,
            }]
        });
    }

    const updateProps = {
        recordId: recordId,
        values: operateValues,
        visible: updateVisible,
        handleVisible: setUpdateVisible,
        handleCallback: handleCallback,
    }

    return (
        <>
            <AxTable
                title={() => '业务表单'}
                loading={loading}
                resizable={false}
                checkboxModel={false}
                data={data}
                columns={columns}
                showPagination={null}
                addemptycolumn={true}
            />
            {updateVisible && <Update {...updateProps} />}
        </>
    );
};

/** 修改业务表单 */
const UpdateEx: React.FC<any> = props => {
    const { form, values, recordId, handleVisible, handleCallback, ...rest } = props;

    const handleUpdate = (fields: any) => {
        return postFormX(url.update, null, { recordId, ...fields }).then((res: any) => {
            message.success('修改成功');
            handleCallback && handleCallback(fields);
            handleVisible(false);
        });
    }

    return (
        <>
            <AxUpdateForm
                form={form}
                title={'修改业务表单'}
                {...rest}
                handleUpdate={handleUpdate}
                handleVisible={handleVisible}
                items={[
                    <AxSelectEnum enumName='eduStatus' form={form} label="在校状态" field="eduStatus" value={values.eduStatus} />,
                ]}
                hiddenItems={[
                ]}
            />
        </>
    )
};

const Update = Form.create<any>()(UpdateEx);


